\n
If you decide to not use redux in your small-scaled project, and figured that context might be enough for your state management needs, you might as well check out the useReducer hook. It brings the action-reducer pattern from redux to context which helps us separate rendering and state management. This separation results in components that are easier to maintain.
Before talking about the concept of useReducer hook, let’s recap how the reduce method in javascript works.The reduce() method receives a callback and the initial value as arguments and reduces all the elements in an array into a single output value which can be of any type (number, string, object, etc.).
A simple example of reduce method would be:
\nconst result = baseArray.reduce((accumulator, currentValue) => {\n // functions body\n return resultValue;\n}, initialValue);Now that we know what reduce method does, let’s talk about when should we use useReducer hook in our project.
The first use case is when we have complex state structure, like nested arrays or objects. In this case, you can provide all the logic inside a single reducer which separates state management from rendering logic and makes it easier to manage.
\nAnother use case is when you need to operate multiple state transitions on one state object. The useReducer hook can give you more predictable state transitions which helps you when complex state transitions are all happening at once.
\nThe useReducer hook accepts a reducer function and an initial state as arguments, and returns the current state and a dispatch function:
const [state, dispatch] = useReducer(reducer, initialState);The reducer is a pure function that accepts 2 parameters: the current state and an action object. Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state.
\nfunction reducer(state, action) {\n let newState;\n switch (action.type) {\n case '...':\n ...\n break;\n }\n return newState;\n}The initial state is the value the state is initialized with.
\nThe dispatch function should be called every time we need to update the state. It takes an action object as an argument.
\nAn action object is an object that describes how to update the state. If the action needs to have payload (information) then additional properties can be added to the action object.
\nconst action = {\n type: 'remove',\n data: {\n key: 'value',\n }\n};In order to understand how useReducer works, let’s build a simple to-do app using it.
First we need to declare out initial state:
\nimport { useReducer, useState } from \"react\";\nimport \"./styles.css\";\n\nconst initialState = [\n {\n name: \"Workout\"\n },\n {\n name: \"Study\"\n },\n {\n name: \"Sleep\"\n }\n];\n\n\nconst App = () => {\n\n return (\n <div className=\"todo-container\">\n \n </div>\n );\n};\n\nexport default App;Then we create a todoItem component for our todo-list items, which displays the name and a remove button for deleting that particular item:
const TodoItem = ({ item }) => {\n const removeTodo = () => {\n\n };\n\n return (\n <div className=\"todo-item\">\n <div className=\"name\">{item.name}</div>\n <div className=\"delete\" onClick={() => removeTodo()}>\n - remove\n </div>\n </div>\n );\n};Next, we need to add todo-items . So let’s add an input for todo name alongside a button for submitting the item:
\nimport { useReducer, useState } from \"react\";\nimport \"./styles.css\";\n\nconst initialState = [...]\n\nconst App = () => {\n const [addInput, setAddInput] = useState(\"\");\n\n const addTodo = () => {\n\n }\n\n return (\n <div className=\"todo-container\">\n <div className=\"add-todo\">\n <input\n placeholder=\"What are you going to do?\"\n value={addInput}\n onChange={(e) => setAddInput(e.target.value)}\n />\n <button onClick={() => addTodo()}>+ Add</button>\n </div>\n </div>\n );\n};\n\nconst TodoItem = ({ item }) => {...}\n\nexport default App;Now we need to implement the functionality of adding and removing to the list.\nFirst let’s declare our useReducer with the initial state and write a reducer function with two actions, add and remove. This returns a state which we should map through in render and a dispatch method for dispatching the actions we need:
import { useReducer, useState } from \"react\";\nimport \"./styles.css\";\n\nconst initialState = [...]\n\nconst reducer = (state, action) => { let newState; switch (action.type) { case \"add\": newState = [...state, action.payload]; break; case \"remove\": newState = [...state.filter((item) => item.name !== action.payload.name)]; break; default: throw new Error(); } return newState;};\nconst App = () => {\n const [addInput, setAddInput] = useState(\"\");\n \n const [state, dispatch] = useReducer(reducer, initialState);\n const addTodo = () => {\n\n }\n\n return (\n <div className=\"todo-container\">\n <div className=\"add-todo\">\n <input\n placeholder=\"What are you going to do?\"\n value={addInput}\n onChange={(e) => setAddInput(e.target.value)}\n />\n <button onClick={() => addTodo()}>+ Add</button>\n </div>\n \n <div className=\"todo-items\"> {state.map((item, index) => ( <TodoItem key={index} item={item} dispatch={dispatch} /> ))} </div> </div>\n );\n};\n\nconst TodoItem = ({ item }) => {...}\n\nexport default App;In the end we need to use dispatch our actions in addTodo() and removeTodo() methods in order to change the state:
const addTodo = () => {\n if (!Boolean(addInput)) {\n alert(\"Name cannot be empty...!\");\n return;\n }\n dispatch({\n type: \"add\",\n payload: {\n name: addInput\n }\n });\n setAddInput(\"\");\n };\n \n const removeTodo = () => {\n dispatch({\n type: \"remove\",\n payload: item\n });\n };See the example in codesandbox
\n